<template>
	<div class="h-100 flex-column">
		<van-tabs
			color="var(--color-primary)"
			title-active-color="var(--color-primary)"
			line-height="0"
			@click="tabClick"
		>
			<van-tab
				v-for="(tab, tabIdx) in tabs"
				:title="tab.label"
				:key="tab.value"
				:name="tabIdx"
			/>
		</van-tabs>
		<div class="flex-1" style="overflow: hidden;">
			<ul class="list" v-if="tabs[currTab].list.length">
				<li v-for="(item, idx) in tabs[currTab].list" :key="idx">
					<div class="flex flex-align-center">
						<div>{{ item.biz_name }}</div>
						<div class="dept">{{ item.dept_name }}</div>
						<span
							class="status"
							:class="{
								success: item.status == 1,
								danger: [2, 6, 7].includes(item.status),
								info: item.status == 3,
								warning: item.status == 5
							}"
						>
							{{ item.status | constFilter("DEPOSIT_STATUS") }}
						</span>
					</div>
					<el-row class="info" :gutter="5">
						<el-col :span="12">
							<label>下定时间：</label>
							<span class="ellipsis">{{ item.pay_date }}</span>
						</el-col>
						<el-col :span="12">
							<label>下定人：</label>
							<span class="ellipsis">{{ item.user_name }}</span>
						</el-col>
						<el-col :span="12">
							<label>使用时间：</label>
							<span class="ellipsis">{{ item.use_date || "-" }}</span>
						</el-col>
						<el-col :span="12">
							<label>付款方式：</label>
							<span class="ellipsis">{{ item.pay_name }}</span>
						</el-col>
						<el-col :span="12">
							<label>定金金额：</label>
							<span class="ellipsis dep_amount">￥{{ item.dep_amount }}</span>
						</el-col>
						<el-col :span="12">
							<label>是否参与结算：</label>
							<span class="ellipsis">{{
								item.is_join_settlement == 1 ? "是" : "否"
							}}</span>
						</el-col>
					</el-row>
					<div class="flex flex-align-center remark" v-if="item.dep_meno">
						<span>备注：</span>
						<p class="flex-1 ellipsis">{{ item.dep_meno }}</p>
					</div>
					<div class="flex flex-justify-end opts" v-if="item.status == 0">
						<button class="info" v-if="item.can_cancel" @click="onCancel(item)">
							取消
						</button>
						<button class="primary" @click="toDeposit(item)">修改</button>
					</div>
				</li>
			</ul>
			<cl-empty v-else icon="order" tips="暂无定金明细" />
		</div>
	</div>
</template>
<script>
import { Tab, Tabs, Dialog } from "vant";
export default {
	props: {
		detail: {
			type: Object,
			default: () => ({})
		}
	},
	components: {
		VanTab: Tab,
		VanTabs: Tabs
	},
	data() {
		return {
			currTab: 0,
			tabs: [
				{ label: "全部", value: "999", list: [] },
				{ label: "已使用", value: "1", list: [] },
				{ label: "未使用", value: "0", list: [] },
				{ label: "退回", value: "5", list: [] }
			]
		};
	},
	created() {
		this.getList();
	},
	methods: {
		tabClick(i) {
			if (this.currTab == i) return;
			this.getList(i);
		},
		async getList(idx = 0) {
			this.currTab = idx;
			const { cus_id } = this.detail;
			let curr = this.tabs[idx];
			const data = await this.$service.deposit.listuse({
				cus_id,
				status: curr.value
			});
			this.tabs[idx].list = data;
		},
		// 取消
		onCancel(row) {
			Dialog.confirm({
				title: "提示",
				message: "是否执行此操作?",
				confirmButtonColor: "#156DFF"
			})
				.then(async () => {
					await this.$service.deposit.cancel(row.id);
					this.$message.success("操作成功");

					this.getList(this.currTab);
				})
				.catch(() => {});
		},
		toDeposit(data = {}) {
			const { cus_id, biz_id, cus_name, cus_mobile, cus_type, dept_id } = this.detail;

			this.$router.push({
				name: "MobileCusDeposit",
				query: {
					cus_id,
					biz_id,
					cus_name,
					cus_mobile,
					cus_type,
					dept_id,
					...data,
					form_type: "edit",
					from_page: "MobileCusDetail"
				}
			});
		}
	}
};
</script>
<style lang="scss" scoped>
::v-deep {
	// tab切换
	.van-tabs__wrap {
		height: 0.8rem !important;
		border-bottom: none;
		.van-tab {
			line-height: 0.72rem !important;
			font-size: 0.26rem !important;
			color: #999;
			&--active {
				font-weight: normal !important;
			}
		}
	}
}
.list-body {
	height: 100%;
	overflow: auto;
}
.dept {
	padding: 0 0.1rem;
	color: #999;
	flex: 1;
}
.info {
	line-height: 1;
	.el-col {
		padding-top: 0.28rem;
		font-size: 0.26rem;
		label {
			display: inline-block;
			color: #666;
		}
		span {
			flex: 1;
			&.dep_amount {
				color: $primary;
				font-weight: bold;
			}
		}
	}
}
.remark {
	margin-top: 0.3rem !important;
}
.opts {
	.edit {
		border-color: $primary;
	}
}
</style>
